<template>
  <el-form :model="form" label-width="auto" style="width: 100%;">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="登录名称">
          <el-input v-model="form.loginname" placeholder="请输入角色名称查询" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="用户姓名">
          <el-input v-model="form.username" placeholder="请输入备注查询" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="GetUserList1">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <br />
  <el-button plain @click="OPEN">
    新增
  </el-button>

  <el-dialog v-model="forma.isno" title="新增【保存之后请继续分配功能】" width="500">
    <el-form :model="forma">
      <el-form-item label="登录名称" :label-width="formLabelWidth">
        <el-input v-model="forma.login_name" autocomplete="off" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="forma.username" autocomplete="off" placeholder="请输入角色名称" />
      </el-form-item>

      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="forma.roleid" placeholder="请输入数据类型">
          <el-option v-for="i in rolelist" :key="i.roleid" :label="i.name" :value="i.roleid" />
        </el-select>
      </el-form-item>
      <el-form-item label="机构" :label-width="formLabelWidth">
        <el-input v-model="forma.department" autocomplete="off" placeholder="请输入机构" />
      </el-form-item>
      <el-form-item label="职位" :label-width="formLabelWidth">
        <el-input v-model="forma.position" autocomplete="off" placeholder="请输入职位" />
      </el-form-item>
      <el-form-item label="是否经理" :label-width="formLabelWidth">
        <el-select v-model="forma.leader_flag" placeholder="请输入是否是经理">
          <el-option label="是" :value="0" />
          <el-option label="否" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="电话号码" :label-width="formLabelWidth">
        <el-input v-model="forma.phonenum" autocomplete="off" placeholder="请输入电话号码" />
      </el-form-item>
      <el-form-item label="电子邮箱" :label-width="formLabelWidth">
        <el-input v-model="forma.email" autocomplete="off" placeholder="请输入电子邮箱" />
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="forma.tenant_id" autocomplete="off" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="forma.remark" autocomplete="off" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="AddRole1">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- <el-button type="default" @click="Addelse">删除</el-button> -->
  <br />
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="#" width="55">
      <template v-slot="scope">
        {{ scope.$index + 1 }} <!-- 自增数字，从1开始 -->
      </template>
    </el-table-column>

    <el-table-column prop="login_name" label="登录名称" />
    <el-table-column prop="username" label="用户名称" />
    <!-- <el-table-column prop="description" label="用户类型" /> -->
    <!-- <el-table-column prop="roleid" label="角色" /> -->
    <el-table-column prop="department" label="机构" />
    <el-table-column prop="leader_flag" label="是否经理">
      <template v-slot="scoped">
        <el-tag v-if="scoped.row.leader_flag == 0">是</el-tag>
        <el-tag v-else>否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="phonenum" label="电话号码" />
    <el-table-column prop="tenant_id" label="排序" />
    <!-- <el-table-column prop="Status" label="状态" /> -->
  </el-table>
  <el-dialog v-model="formb.isno" title="分配功能【分配之后请继续分配按钮】" width="500">
    <el-form :model="formb">
      <el-tree-select v-model="formb.data" :data="permissiondata" multiple :render-after-expand="false" show-checkbox
        check-strictly check-on-click-node style="width: 240px" />
    </el-form>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="AddRolePermissionsAction">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 4, 5]"
    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="form.pageTotal"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { RoleList, AddRole, GetRoleList, GetPermission, AddPermission, GetUserList, AddUserList } from '@/api/loglists/index'
import { type RoleListData, type AddRoleData, type AddPerssionData, type UserListData, type AdduserData } from '@/api/loglists/type'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { fa } from 'element-plus/es/locales.mjs'
const formLabelWidth = '140px'
const route = useRoute()
const router = useRouter()
const form = ref<UserListData>({
  loginname: '',
  username: '',
  pageIndex: 1,
  pageSize: 10,
  pageTotal: 0,
  pageCount: 0
})
const forma = ref<AdduserData>({
  isno: false,
  userId: null,
  username: '',
  login_name: '',
  roleid: null,
  password: '123',
  leader_flag: null,
  position: '',
  department: '',
  phonenum: '',
  ismanager: null,
  isystem: null,
  Status: null,
  email: '',
  description: '',
  remark: '',
  tenant_id: null
})
const formb = ref<AddPerssionData>({
  isno: false,
  data: null,
  roleid: null
})
onMounted(() => {
  GetUserList1()
  showRolePermissions()
  GetRoleList1()
})
const tableData = ref([])
const GetUserList1 = async () => {
  await GetUserList(form.value).then(function (res) {
    console.log(res.data.data);
    tableData.value = res.data.data
    form.value.pageCount = res.data.pageCount
    form.value.pageTotal = res.data.pageTotal
  })
}
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  GetUserList1()

}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  form.value.pageIndex = val
  GetUserList1()
}
const permissiondata = ref([])
const showRolePermissions = async () => {
  await GetPermission().then(function (res: any) {
    permissiondata.value = res.data
  })
}


const AddRolePermissionsAction = async () => {
  console.log(formb.value.data);

  await AddPermission(formb.value).then(function (res) {
    console.log(res.data);
    if (res.data > 0) {
      formb.value.isno = false;
    }
  })
}

const editRow = () => {

}
const deleteRow = () => {

}
const rolelist: any = ref([])
const GetRoleList1 = async () => {
  await GetRoleList().then(function (res) {
    console.log(res.data);
    rolelist.value = res.data
  })
}
const OPEN = () => {
  forma.value.isno = true;
}
const AddRole1 = async () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!emailRegex.test(forma.value.email)) {
    ElMessage.error("邮箱格式不正确");
    return;
  }
  if (!phoneRegex.test(forma.value.phonenum)) {
    ElMessage.error("电话格式不正确");
    return;
  }

  await AddUserList(forma.value).then(function (res) {
    console.log(res.data);
    if (res.data > 0) {
      forma.value.isno = false;
      GetUserList1()
    } else {
      ElMessage.error("用户名存在！")
      return;
    }
  })
}

</script>

<style>
.operation-text {
  white-space: nowrap;
  /* Prevent line breaks */
}
</style>